<template>
	<view class="lottery-rows">
		<view class="lottery-rows__box">
			<view v-if="!pmRankingType" class="lottery-rows__tab">
				<view v-for="(item, index) in tabs" :key="index"
					:class="{ 'item': true, 'is-active': tabCurrentIndex == index ? true: false }"
					@click="changeTabs(index)">
					<text>{{ item }}</text>
				</view>
			</view>
			<view v-if="pmRankingType" style="height: 40rpx;"></view>
			<view>
				<view v-if="tabCurrentIndex == 0 && item.status == 0" v-for="(item, index) in proceedList" :key="index"
					class="lottery-result__process">
					<view class="process">
						<view class="label">
							<text>开奖倒计时</text>
						</view>
						<view class="line">
							<text :style="{width: `${ item.nowscore / item.score * 100 }%`}"></text>
						</view>
						<view class="value">
							<text>{{ getTime(item.kjdjstime) }}</text>
						</view>
					</view>
					<view class="result">
						<view class="label">
							<text>大转盘抽奖结果公布</text>
						</view>
						<view class="infos">
							<view>
								<text v-if="item.nowscore / item.score * 100 < 100 ">逆伶生物</text>
								<text v-else>进度100%将于2分钟自动启动</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tabCurrentIndex == 0 && item.status == 1" v-for="(item, index) in proceedList" :key="index"
					class="lottery-result__process">
					<view class="process">
						<view class="label">
							<text>已结束</text>
						</view>
						<view class="line">
							<text style="width: 100%;"></text>
						</view>
						<view class="value">
							<text>100%</text>
						</view>
					</view>
					<view class="result">
						<view class="label">
							<text>大转盘抽奖结果公布</text>
						</view>
						<view class="infos">
							<view>
								<text>逆伶生物</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tabCurrentIndex == 1" class="lottery-result__ranking">
					<view class="pmTab">
						<view v-for="(pmItem, pmIndex) in pmTabs" :key="pmIndex"
							:class="{ 'pmItem': true, 'pm-is-active': pmTabIndex == pmIndex ? true: false }"
							@click="changePmTabs(pmIndex)">
							<view class="cicleItem">
								<text>{{ pmItem }}</text>
							</view>
						</view>
					</view>
					<view v-if="pmTabIndex == 0" class="lottery-result__more"
						style="text-align: center;padding: 10px 0px;">
						<text
							style="display: block;color: red;font-size: 0.9em; height: 30px; line-height: 30px;">【福利值：{{pmzpzgInfo.pm_day.jcamount}}】</text>
						<text v-if="pmzpzgInfo.pm_day.choujiang_id <= 0"
							style="color: #b80c00;font-size: 1.5em;">您暂无抽奖资格</text>
						<text v-if="pmzpzgInfo.pm_day.choujiang_id > 0"
							style="color: #b80c00;font-size: 1.5em;">恭喜您获得抽奖资格</text>
						<button v-if="pmzpzgInfo.pm_day.choujiang_id > 0"
							@click="startPmPlay(`${pmzpzgInfo.pm_day.choujiang_id}`)"
							style="margin-top: 20px;">立即抽奖</button>
						<text v-if="!pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">日排名转盘在每天00:20分后开始抽奖。</text>
						<text v-if="pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">每日1点后开始抽奖</text>
					</view>
					<view v-if="pmTabIndex == 1" class="lottery-result__more"
						style="text-align: center;padding: 10px 0px;">
						<text
							style="display: block;color: red;font-size: 0.9em; height: 30px; line-height: 30px;">【福利值：{{pmzpzgInfo.pm_week.jcamount}}】</text>
						<text v-if="pmzpzgInfo.pm_week.choujiang_id <= 0"
							style="color: #b80c00;font-size: 1.5em;">您暂无抽奖资格</text>
						<text v-if="pmzpzgInfo.pm_week.choujiang_id > 0"
							style="color: #b80c00;font-size: 1.5em;">恭喜您获得抽奖资格</text>
						<button v-if="pmzpzgInfo.pm_week.choujiang_id > 0"
							@click="startPmPlay(`${pmzpzgInfo.pm_week.choujiang_id}`)"
							style="margin-top: 20px;">立即抽奖</button>
						<text v-if="!pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">周排名转盘在每周一00:15分后开始抽奖。</text>
						<text v-if="pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">每日1点后开始抽奖</text>
					</view>
					<view v-if="pmTabIndex == 2" class="lottery-result__more"
						style="text-align: center;padding: 10px 0px;">
						<text
							style="display: block;color: red;font-size: 0.9em; height: 30px; line-height: 30px;">【福利值：{{pmzpzgInfo.pm_month.jcamount}}】</text>
						<text v-if="pmzpzgInfo.pm_month.choujiang_id <= 0"
							style="color: #b80c00;font-size: 1.5em;">您暂无抽奖资格</text>
						<text v-if="pmzpzgInfo.pm_month.choujiang_id > 0"
							style="color: #b80c00;font-size: 1.5em;">恭喜您获得抽奖资格</text>
						<button v-if="pmzpzgInfo.pm_month.choujiang_id > 0"
							@click="startPmPlay(`${pmzpzgInfo.pm_month.choujiang_id}`)"
							style="margin-top: 20px;">立即抽奖</button>
						<text v-if="!pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">月排名转盘在每月1日00:10分后开始抽奖。</text>
						<text v-if="pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">每日1点后开始抽奖</text>
					</view>
					<view v-if="pmTabIndex == 3" class="lottery-result__more"
						style="text-align: center;padding: 10px 0px;">
						<text
							style="display: block;color: red;font-size: 0.9em; height: 30px; line-height: 30px;">【福利值：{{pmzpzgInfo.pm_quarter.jcamount}}】</text>
						<text v-if="pmzpzgInfo.pm_quarter.choujiang_id <= 0"
							style="color: #b80c00;font-size: 1.5em;">您暂无抽奖资格</text>
						<text v-if="pmzpzgInfo.pm_quarter.choujiang_id > 0"
							style="color: #b80c00;font-size: 1.5em;">恭喜您获得抽奖资格</text>
						<button v-if="pmzpzgInfo.pm_quarter.choujiang_id > 0"
							@click="startPmPlay(`${pmzpzgInfo.pm_quarter.choujiang_id}`)"
							style="margin-top: 20px;">立即抽奖</button>
						<text v-if="!pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">季排名转盘在每季1日00:05分后开始抽奖。</text>
						<text v-if="pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">每日1点后开始抽奖</text>
					</view>
					<view v-if="pmTabIndex == 4" class="lottery-result__more"
						style="text-align: center;padding: 10px 0px;">
						<text
							style="display: block;color: red;font-size: 0.9em; height: 30px; line-height: 30px;">【福利值：{{pmzpzgInfo.pm_year.jcamount}}】</text>
						<text v-if="pmzpzgInfo.pm_year.choujiang_id <= 0"
							style="color: #b80c00;font-size: 1.5em;">您暂无抽奖资格</text>
						<text v-if="pmzpzgInfo.pm_year.choujiang_id > 0"
							style="color: #b80c00;font-size: 1.5em;">恭喜您获得抽奖资格</text>
						<button v-if="pmzpzgInfo.pm_year.choujiang_id > 0"
							@click="startPmPlay(`${pmzpzgInfo.pm_year.choujiang_id}`)"
							style="margin-top: 20px;">立即抽奖</button>
						<text v-if="!pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">年度排名转盘将在年底启动。</text>
						<text v-if="pmRankingType"
							style="display: block; color: blue;font-size: 0.5em; height: 30px; line-height: 30px;">每日1点后开始抽奖</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [],//, '幸运大转盘''排名福利转盘'
				pmTabs: ['日', '周', '月', '季', '年'],
				pmTypes: ['day', 'week', 'month', 'season', 'year'],
				currentPmTab: "日",
				tabIndex: 0,
				pmTabIndex: 0,
				tableData: []
			}
		},
		props: {
			pmRankingType: {
				type: String,
				default () {
					return ''
				}
			},
			proceedList: {
				type: Array,
				default () {
					return []
				}
			},
			pmzpzgInfo: {
				type: Object,
				default () {
					return {

					}
				}
			},
		},
		computed: {
			tabCurrentIndex() {
				if (this.pmRankingType) {
					return 1;
				} else {
					return this.tabIndex;
				}
			}
		},
		methods: {
			getTime(offset) {
				if (offset) {
					let hour = parseInt(offset / 60 / 60)
					hour = hour < 10 ? '0' + hour : hour
					let minute = parseInt(offset % 3600 / 60)
					minute = minute < 10 ? '0' + minute : minute
					let second = offset % 60
					second = second < 10 ? '0' + second : second
					return `${hour}:${minute}:${second}`;
				}
				return `00:00:00`;


			},
			changeTabs(val) {
				this.tabIndex = val
				if (val == 0) {
					this.$emit('changeZP', "dzp");
				} else if (val == 1) {
					this.$emit('changeZP', "pm");
				}
			},
			startPmPlay(id) {
				this.$emit('startPmPlay', id);
			},
			changeTabsIndex(tableIndex) {
				this.tabIndex = tableIndex
			},
			changePmTabs(val) {
				this.pmTabIndex = val
				this.currentPmTab = this.pmTabs[val]
				this.$emit('changePmType', this.pmTypes[val]);
			},
		}
	}
</script>

<style lang="less" scoped>
	.pmTab {
		display: flex;
		flex-direction: row;

		.pmItem {
			flex: 1;
			text-align: center;

			.cicleItem {
				display: inline-block;
				height: 20px;
				width: 20px;
				background-color: inherit;
				border-radius: 10px;

				text {
					text-align: center;
					line-height: 20px;
					color: black;
				}
			}
		}

		.pm-is-active {
			text-align: center;

			.cicleItem {

				background-color: #c20800;

				text {
					color: white;
				}
			}

		}
	}

	.lottery-rows {
		position: relative;
		padding: 0 3vw 1vw;

		.lottery-rows__box {
			position: relative;
			background: -webkit-linear-gradient(top, #ffffff, #ffe6c8);
			border: 5px solid #f39800;
			border-radius: 20px;
			padding: 0 20px 10px 20px;
		}

		.lottery-rows__head {
			position: relative;
			height: 40px;
			line-height: 40px;
			margin: 0 15% 20px;
			text-align: center;
			background: url('https://wx.2024csnl.com/static/lottery/lottery-7.png') center center no-repeat;
			background-size: 100% 100%;

			text {
				font-size: 15px;
				font-weight: normal;
				color: #ffffff;
			}
		}

		.lottery-rows__tab {
			position: relative;
			margin: 0 10% 10px;
			display: flex;

			.item {
				flex: 1;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-10a.png') center center no-repeat;
				background-size: 100% 100%;
				text-align: center;

				&.is-active {
					background-image: url('https://wx.2024csnl.com/static/lottery/lottery-10b.png');

					&:first-child {
						background-image: url('https://wx.2024csnl.com/static/lottery/lottery-8b.png');
					}

					&:last-child {
						background-image: url('https://wx.2024csnl.com/static/lottery/lottery-9b.png');
					}

					text {
						color: #ffffff;
					}
				}

				&:first-child {
					background-image: url('https://wx.2024csnl.com/static/lottery/lottery-8a.png');
					padding-left: 10px;
				}

				&:last-child {
					background-image: url('https://wx.2024csnl.com/static/lottery/lottery-9a.png');
					padding-right: 10px;
				}

				text {
					display: block;
					height: 40px;
					line-height: 40px;
					font-size: 15px;
					color: #ad3515;
				}
			}
		}
	}

	.lottery-result__process {
		.process {
			display: flex;
			margin: 5px 0 5px;

			.label {
				height: 20px;
				line-height: 20px;
				color: #ad3515;
			}

			.line {
				flex: 1;
				height: 10px;
				background: #fde2bf;
				position: relative;
				top: 5px;
				overflow: hidden;
				border-radius: 10px;
				margin: 0 10px;

				text {
					display: block;
					height: 10px;
					background: #c20800;
				}
			}

			.value {
				height: 20px;
				line-height: 20px;
				color: #ad3515;
			}
		}

		.result {
			position: relative;
			padding: 5px 0 10px 70px;
			background: url('https://wx.2024csnl.com/static/lottery/lottery-13.png') 5px center no-repeat #feefda;
			background-size: 60px;
			border: 1px solid #facf8f;
			border-radius: 100px;

			.label {
				line-height: 25px;
				font-size: 15px;
				color: #ad3515;
			}

			.infos {
				line-height: 20px;
				font-size: 13px;
			}
		}
	}

	.lottery-result__ranking {
		position: relative;
	}

	.lottery-result__table {
		position: relative;
		margin: 0 0 10px;

		.rows {
			width: 100%;
			display: flex;

			&:nth-child(2) {
				.item {
					.index {
						&::before {
							content: '';
							display: block;
							width: 40px;
							height: 40px;
							background: url('https://wx.2024csnl.com/static/lottery/lottery-14.png') 0 center no-repeat;
							background-size: 24px;
						}
					}

					&:nth-child(3) {
						.money {
							color: #c20800;
						}
					}
				}
			}

			&:nth-child(3) {
				.index {
					&::before {
						content: '';
						display: block;
						width: 40px;
						height: 40px;
						background: url('https://wx.2024csnl.com/static/lottery/lottery-15.png') 0 center no-repeat;
						background-size: 24px;
					}
				}

				.item {
					&:nth-child(3) {
						.money {
							color: #c20800;
						}
					}
				}
			}

			&:nth-child(4) {
				.index {
					&::before {
						content: '';
						display: block;
						width: 40px;
						height: 40px;
						background: url('https://wx.2024csnl.com/static/lottery/lottery-16.png') 0 center no-repeat;
						background-size: 24px;
					}
				}

				.item {
					&:nth-child(3) {
						.money {
							color: #c20800;
						}
					}
				}
			}

			.item {
				flex: 1;

				&:first-child {
					width: 60px;
					flex: none;
				}

				&:last-child {
					text-align: right;
				}

				.thd {
					line-height: 40px;
					color: #999999;
				}

				.index {
					width: 30px;
					height: 40px;
					line-height: 40px;
					color: #999999;
					font-family: 'DinProMedium';
					font-size: 16px;
					overflow: hidden;
				}

				.user {
					max-width: 100px;
					height: 40px;
					line-height: 40px;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					image {
						vertical-align: middle;
						width: 24px;
						height: 24px;
						border-radius: 50%;
						margin: 0 8px 0 0;
					}

					text {
						display: inline;
						vertical-align: middle;
						line-height: 24px;
					}
				}

				.money {
					height: 40px;
					line-height: 40px;
					color: #333333;
					font-family: 'DinProMedium';
					font-size: 16px;

					&::before {
						content: '￥';
					}
				}
			}
		}
	}

	.lottery-result__more {
		button {
			width: 100%;
			height: 40px;
			line-height: 40px;
			border: 0;
			border-radius: 6px;
			background: #ff6336;
			color: #ffffff;
		}
	}
</style>